<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button style="float:right" type="primary" @click="handleAdd" size="small">
          新增供应商
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="供应商名称：">
            <el-input v-model="listQuery.name" placeholder="请输入供应商名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="供应商申请人信息：">
            <el-input v-model="listQuery.applicant" placeholder="请输入ID/昵称/手机号" clearable></el-input>
          </el-form-item>
          <el-form-item label="状态：">
            <el-select v-model="listQuery.status" placeholder="全部" clearable>
              <el-option label="正常" :value="1"></el-option>
              <el-option label="禁用" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" size="small" @click="handleSearchList">查询</el-button>
        </el-form>
      </div>
    </el-card>

    <div class="table-container">
      <el-table :data="list" style="width: 100%;" v-loading="listLoading" border>
        <el-table-column label="ID" width="80" align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="供应商名称" align="center" min-width="180">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column label="供应商申请人信息" align="center" min-width="180">
          <template slot-scope="scope">
            <div style="display: flex; align-items: center; justify-content: center;">
              <el-avatar :size="40" :src="scope.row.applicant_avatar || defaultAvatar"
                style="margin-right: 10px;"></el-avatar>
              <div style="text-align: left;">
                <div style="font-weight: 500;">{{ scope.row.applicant_name }}</div>
                <div style="font-size: 12px; color: #909399;">ID: {{ scope.row.applicant_uid }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="联系人/手机号" align="center" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.contact_name">{{ scope.row.contact_name }}</div>
            <div v-if="scope.row.contact_phone">{{ scope.row.contact_phone }}</div>
            <span v-if="!scope.row.contact_name && !scope.row.contact_phone">-</span>
          </template>
        </el-table-column>
        <el-table-column label="所属区域" align="center" min-width="180">
          <template slot-scope="scope">
            {{ scope.row.full_areaname || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
              {{ scope.row.status === 1 ? '正常' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="450" align="center" fixed="right">
          <template slot-scope="scope">
            <div style="white-space: nowrap;">
              <el-button size="mini" :type="scope.row.status === 1 ? 'warning' : 'success'"
                @click="handleStatusToggle(scope.row)"
                :loading="loadingRowId === scope.row.id && loadingAction === 'status'">
                {{ scope.row.status === 1 ? '禁用' : '启用' }}
              </el-button>
              <el-button size="mini" @click="handleDetail(scope.row)"
                :loading="loadingRowId === scope.row.id && loadingAction === 'detail'">详情</el-button>
              <el-button size="mini" @click="handleEdit(scope.row)"
                :loading="loadingRowId === scope.row.id && loadingAction === 'edit'">编辑</el-button>
              <el-button size="mini" @click="handlePickupPoints(scope.row)">支持的自提点</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
                :loading="loadingRowId === scope.row.id && loadingAction === 'delete'">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper" :page-size="listQuery.pageSize" :page-sizes="[5, 10, 15]"
        :current-page.sync="listQuery.pageNum" :total="total">
      </el-pagination>
    </div>

    <!-- 自提点列表对话框 -->
    <el-dialog title="支持的自提点" :visible.sync="pickupPointDialogVisible" width="1200px" :close-on-click-modal="false"
      @close="handlePickupPointDialogClose">
      <div v-if="currentVendor" style="margin-bottom: 15px; padding: 10px; background: #f5f7fa; border-radius: 4px;">
        <span style="font-weight: 500;">供应商：</span>
        <span>{{ currentVendor.name }}</span>
      </div>

      <el-card class="filter-container" shadow="never" style="margin-bottom: 15px;">
        <el-form :inline="true" :model="pickupPointQuery" size="small">
          <el-form-item label="自提点名称：">
            <el-input v-model="pickupPointQuery.storeName" placeholder="请输入自提点名称" clearable
              style="width: 200px;"></el-input>
          </el-form-item>
          <el-form-item label="门店申请人信息：">
            <el-input v-model="pickupPointQuery.applicant" placeholder="请输入ID/昵称/手机号" clearable
              style="width: 200px;"></el-input>
          </el-form-item>
          <el-button type="primary" size="small" @click="handlePickupPointSearch">查询</el-button>
        </el-form>
      </el-card>

      <el-table :data="pickupPointList" style="width: 100%;" v-loading="pickupPointLoading" border>
        <el-table-column label="ID" width="80" align="center">
          <template slot-scope="scope">{{ scope.row.store_id }}</template>
        </el-table-column>
        <el-table-column label="自提点名称" align="center" min-width="180">
          <template slot-scope="scope">{{ scope.row.store_name }}</template>
        </el-table-column>
        <el-table-column label="自提点申请人信息" align="center" min-width="180">
          <template slot-scope="scope">
            <div style="display: flex; align-items: center; justify-content: center;">
              <el-avatar :size="40" :src="scope.row.applicant_avatar || defaultAvatar"
                style="margin-right: 10px;"></el-avatar>
              <div style="text-align: left;">
                <div style="font-weight: 500;">{{ scope.row.applicant_name }}</div>
                <div style="font-size: 12px; color: #909399;">ID: {{ scope.row.applicant_uid }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="联系人/手机号" align="center" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.applicant_mobile">{{ scope.row.applicant_mobile }}</div>
            <span v-else>-</span>
          </template>
        </el-table-column> -->
        <el-table-column label="所属区域" align="center" min-width="180">
          <template slot-scope="scope">
            {{ scope.row.full_address || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="详细地址" align="center" min-width="220">
          <template slot-scope="scope">
            {{ scope.row.detailed_address || '-' }}
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container" style="margin-top: 15px;">
        <el-pagination background @size-change="handlePickupPointSizeChange"
          @current-change="handlePickupPointCurrentChange" layout="total, sizes, prev, pager, next, jumper"
          :page-size="pickupPointQuery.pageSize" :page-sizes="[5, 10, 15]" :current-page.sync="pickupPointQuery.pageNum"
          :total="pickupPointTotal">
        </el-pagination>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="pickupPointDialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 新增/编辑/详情对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="750px" :close-on-click-modal="false">
      <el-form :model="supplierForm" :rules="rules" ref="supplierForm" label-width="120px" :disabled="isDetail">
        <el-form-item label="供应商名称" prop="name">
          <el-input v-model="supplierForm.name" placeholder="请输入供应商名称"></el-input>
        </el-form-item>

        <el-form-item label="所在地址" required>
          <div style="display: flex; gap: 10px;">
            <el-form-item prop="province_id" style="flex: 1; margin-bottom: 0;">
              <el-select v-model="supplierForm.province_id" placeholder="选择省" clearable @change="onProvinceChange"
                :loading="provinceLoading" style="width: 100%;">
                <el-option v-for="province in provinces" :key="province.id" :label="province.name"
                  :value="province.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="city_id" style="flex: 1; margin-bottom: 0;">
              <el-select v-model="supplierForm.city_id" placeholder="选择市" clearable @change="onCityChange"
                :loading="cityLoading" style="width: 100%;">
                <el-option v-for="city in cities" :key="city.id" :label="city.name" :value="city.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="district_id" style="flex: 1; margin-bottom: 0;">
              <el-select v-model="supplierForm.district_id" placeholder="选择区县" clearable :loading="districtLoading"
                style="width: 100%;">
                <el-option v-for="district in districts" :key="district.id" :label="district.name"
                  :value="district.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form-item>

        <el-form-item label="详细地址" prop="address">
          <el-input v-model="supplierForm.address" placeholder="请输入详细地址"></el-input>
        </el-form-item>

        <el-form-item label="申请人ID" prop="applicant_uid">
          <div style="display: flex; gap: 10px;">
            <el-input v-model="supplierForm.applicant_uid" placeholder="请输入申请人ID"
              @keyup.enter.native="handleSearchApplicant" style="flex: 1;"></el-input>
            <el-button type="primary" @click="handleSearchApplicant" :loading="searchingApplicant">查询</el-button>
          </div>
        </el-form-item>

        <el-form-item v-if="applicantInfo.name" label=" ">
          <div class="member-info">
            <el-avatar :size="40" :src="applicantInfo.avatar || defaultAvatar" class="avatar"></el-avatar>
            <div class="info">
              <div class="name">{{ applicantInfo.name }}</div>
              <div class="uid">ID: {{ applicantInfo.uid }}</div>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="联系人姓名" prop="contact_name">
          <el-input v-model="supplierForm.contact_name" placeholder="请输入联系人姓名"></el-input>
        </el-form-item>

        <el-form-item label="联系手机号" prop="contact_phone">
          <el-input v-model="supplierForm.contact_phone" placeholder="请输入联系手机号"></el-input>
        </el-form-item>

        <el-form-item label="推荐人ID">
          <div style="display: flex; gap: 10px;">
            <el-input v-model="supplierForm.referrer_uid" placeholder="请输入推荐人ID"
              @keyup.enter.native="handleSearchReferrer" style="flex: 1;"></el-input>
            <el-button type="primary" @click="handleSearchReferrer" :loading="searchingReferrer">查询</el-button>
          </div>
        </el-form-item>

        <el-form-item v-if="referrerInfo.name" label=" ">
          <div class="member-info">
            <el-avatar :size="40" :src="referrerInfo.avatar || defaultAvatar" class="avatar"></el-avatar>
            <div class="info">
              <div class="name">{{ referrerInfo.name }}</div>
              <div class="uid">ID: {{ referrerInfo.uid }}</div>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="是否启用">
          <el-switch v-model="supplierForm.status" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ isDetail ? '关 闭' : '取 消' }}</el-button>
        <el-button v-if="!isDetail" type="primary" @click="handleSubmit" :loading="submitting">{{ isEdit ? '保 存' : '添 加'
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList, createSupplier, updateSupplier, deleteSupplier, getSupplier, updateStatus, getMemberByUid, getAddresses, getPickupPoints } from '@/api/supplier'

export default {
  name: 'supplierList',
  data() {
    return {
      listQuery: {
        name: '',
        applicant: '',
        status: '',
        pageNum: 1,
        pageSize: 10
      },
      list: [],
      total: 0,
      listLoading: false,
      dialogVisible: false,
      dialogTitle: '新增供应商',
      isEdit: false,
      isDetail: false,
      editId: null,
      supplierForm: {
        name: '',
        province_id: '',
        city_id: '',
        district_id: '',
        address: '',
        applicant_uid: '',
        referrer_uid: '',
        contact_name: '',
        contact_phone: '',
        status: 1
      },
      applicantInfo: {},
      referrerInfo: {},
      defaultAvatar: '',
      provinces: [],
      cities: [],
      districts: [],
      provinceLoading: false,
      cityLoading: false,
      districtLoading: false,
      searchingApplicant: false,
      searchingReferrer: false,
      submitting: false,
      loadingRowId: null, // 当前正在操作的行ID
      loadingAction: '', // 当前操作类型: detail/edit/status/delete
      pickupPointDialogVisible: false,
      currentVendor: null,
      pickupPointList: [],
      pickupPointTotal: 0,
      pickupPointLoading: false,
      pickupPointQuery: {
        storeName: '',
        applicant: '',
        pageNum: 1,
        pageSize: 10
      },
      rules: {
        name: [
          { required: true, message: '请输入供应商名称', trigger: 'blur' }
        ],
        province_id: [
          { required: true, message: '请选择省份', trigger: 'change' }
        ],
        city_id: [
          { required: true, message: '请选择城市', trigger: 'change' }
        ],
        district_id: [
          { required: true, message: '请选择区县', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        applicant_uid: [
          { required: true, message: '请输入申请人ID', trigger: 'blur' }
        ],
        contact_name: [
          { required: true, message: '请输入联系人姓名', trigger: 'blur' }
        ],
        contact_phone: [
          { required: true, message: '请输入联系手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
    this.loadProvinces()
  },
  methods: {
    loadProvinces() {
      this.provinceLoading = true
      getAddresses({ level: 1 }).then(response => {
        this.provinces = response.data
      }).finally(() => {
        this.provinceLoading = false
      })
    },
    onProvinceChange(provinceId) {
      this.supplierForm.city_id = ''
      this.supplierForm.district_id = ''
      this.cities = []
      this.districts = []
      if (provinceId) {
        this.cityLoading = true
        getAddresses({ level: 2, parent_id: provinceId }).then(response => {
          this.cities = response.data
        }).finally(() => {
          this.cityLoading = false
        })
      }
    },
    onCityChange(cityId) {
      this.supplierForm.district_id = ''
      this.districts = []
      if (cityId) {
        this.districtLoading = true
        getAddresses({ level: 3, parent_id: cityId }).then(response => {
          this.districts = response.data
        }).finally(() => {
          this.districtLoading = false
        })
      }
    },
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.listLoading = false
        if (response.data && response.data.data) {
          this.list = response.data.data
          this.total = response.data.total
        } else {
          this.list = []
          this.total = 0
        }
      }).catch(error => {
        this.listLoading = false
        console.error('获取列表失败:', error)
        this.$message.error('获取列表失败')
      })
    },
    handleSearchList() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val
      this.getList()
    },
    handleAdd() {
      this.dialogTitle = '新增供应商'
      this.isEdit = false
      this.isDetail = false
      this.editId = null
      this.resetForm()
      this.dialogVisible = true
    },
    async handleDetail(row) {
      this.loadingRowId = row.id
      this.loadingAction = 'detail'

      this.dialogTitle = '供应商详情'
      this.isEdit = false
      this.isDetail = true
      this.editId = row.id

      try {
        // 获取详情
        const detail = await getSupplier(row.id)
        const supplier = detail.data

        // 如果有area_id，通过后端API反查省市区信息
        let provinceId = ''
        let cityId = ''
        let districtId = supplier.area_id || ''

        if (districtId) {
          const areaRes = await getAddresses({ area_id: districtId })
          if (areaRes.data) {
            provinceId = areaRes.data.province_id
            cityId = areaRes.data.city_id
            districtId = areaRes.data.district_id
            this.cities = areaRes.data.cities || []
            this.districts = areaRes.data.districts || []
          }
        }

        this.supplierForm = {
          name: supplier.name,
          province_id: provinceId,
          city_id: cityId,
          district_id: districtId,
          address: supplier.address,
          applicant_uid: supplier.applicant_uid,
          referrer_uid: supplier.referrer_uid,
          contact_name: supplier.contact_name,
          contact_phone: supplier.contact_phone,
          status: supplier.status
        }

        // 设置申请人信息
        if (supplier.applicant_uid) {
          this.applicantInfo = {
            uid: supplier.applicant_uid,
            name: supplier.applicant_name
          }
        }
        // 设置推荐人信息
        if (supplier.referrer_uid) {
          this.referrerInfo = {
            uid: supplier.referrer_uid,
            name: supplier.referrer_name
          }
        }
        this.dialogVisible = true
      } catch (error) {
        console.error('获取详情失败:', error)
        this.$message.error('获取详情失败')
      } finally {
        this.loadingRowId = null
        this.loadingAction = ''
      }
    },
    handlePickupPoints(row) {
      this.currentVendor = row
      this.pickupPointDialogVisible = true
      this.getPickupPointList()
    },
    async handleEdit(row) {
      this.loadingRowId = row.id
      this.loadingAction = 'edit'

      try {
        this.dialogTitle = '编辑供应商'
        this.isEdit = true
        this.isDetail = false
        this.editId = row.id

        // 先获取详情
        const detail = await getSupplier(row.id)
        const supplier = detail.data

        // 如果有area_id，通过后端API反查省市区信息
        let provinceId = ''
        let cityId = ''
        let districtId = supplier.area_id || ''

        if (districtId) {
          const areaRes = await getAddresses({ area_id: districtId })
          if (areaRes.data) {
            provinceId = areaRes.data.province_id
            cityId = areaRes.data.city_id
            districtId = areaRes.data.district_id
            this.cities = areaRes.data.cities || []
            this.districts = areaRes.data.districts || []
          }
        }

        this.supplierForm = {
          name: supplier.name,
          province_id: provinceId,
          city_id: cityId,
          district_id: districtId,
          address: supplier.address,
          applicant_uid: supplier.applicant_uid,
          referrer_uid: supplier.referrer_uid,
          contact_name: supplier.contact_name,
          contact_phone: supplier.contact_phone,
          status: supplier.status
        }

        // 设置申请人信息
        if (supplier.applicant_uid) {
          this.applicantInfo = {
            uid: supplier.applicant_uid,
            name: supplier.applicant_name
          }
        }
        // 设置推荐人信息
        if (supplier.referrer_uid) {
          this.referrerInfo = {
            uid: supplier.referrer_uid,
            name: supplier.referrer_name
          }
        }
        this.dialogVisible = true
      } catch (error) {
        console.error('获取详情失败:', error)
        this.$message.error('获取详情失败')
      } finally {
        this.loadingRowId = null
        this.loadingAction = ''
      }
    },
    handleDelete(row) {
      this.$confirm('确定要删除该供应商吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loadingRowId = row.id
        this.loadingAction = 'delete'

        deleteSupplier(row.id).then(() => {
          this.$message.success('删除成功')
          this.getList()
        }).catch(error => {
          console.error('删除失败:', error)
          this.$message.error('删除失败')
        }).finally(() => {
          this.loadingRowId = null
          this.loadingAction = ''
        })
      })
    },
    handleStatusToggle(row) {
      const actionText = row.status === 1 ? '禁用' : '启用'
      this.$confirm(`确定要${actionText}该供应商吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loadingRowId = row.id
        this.loadingAction = 'status'

        const newStatus = row.status === 1 ? 0 : 1
        updateStatus(row.id, newStatus).then(() => {
          this.$message.success(`${actionText}成功`)
          this.getList()
        }).catch(error => {
          console.error(`${actionText}失败:`, error)
          this.$message.error(`${actionText}失败`)
        }).finally(() => {
          this.loadingRowId = null
          this.loadingAction = ''
        })
      })
    },
    handleSearchApplicant() {
      if (!this.supplierForm.applicant_uid) {
        this.$message.warning('请输入申请人ID')
        return
      }
      this.searchingApplicant = true
      getMemberByUid(this.supplierForm.applicant_uid).then(response => {
        if (response.data) {
          this.applicantInfo = response.data
          this.$message.success('查询成功')
        }
      }).catch(error => {
        console.error('查询失败:', error)
        this.$message.error(error.message || '查询失败')
        this.applicantInfo = {}
      }).finally(() => {
        this.searchingApplicant = false
      })
    },
    handleSearchReferrer() {
      if (!this.supplierForm.referrer_uid) {
        this.$message.warning('请输入推荐人ID')
        return
      }
      this.searchingReferrer = true
      getMemberByUid(this.supplierForm.referrer_uid).then(response => {
        if (response.data) {
          this.referrerInfo = response.data
          this.$message.success('查询成功')
        }
      }).catch(error => {
        console.error('查询失败:', error)
        this.$message.error(error.message || '查询失败')
        this.referrerInfo = {}
      }).finally(() => {
        this.searchingReferrer = false
      })
    },
    handleSubmit() {
      // 验证表单所有字段
      this.$refs.supplierForm.validate((valid) => {
        if (valid) {
          this.submitting = true
          if (this.isEdit) {
            updateSupplier(this.editId, this.supplierForm).then(() => {
              this.$message.success('更新成功')
              this.dialogVisible = false
              this.getList()
            }).catch(error => {
              console.error('更新失败:', error)
              this.$message.error(error.message || '更新失败')
            }).finally(() => {
              this.submitting = false
            })
          } else {
            createSupplier(this.supplierForm).then(() => {
              this.$message.success('创建成功')
              this.dialogVisible = false
              this.getList()
            }).catch(error => {
              console.error('创建失败:', error)
              this.$message.error(error.message || '创建失败')
            }).finally(() => {
              this.submitting = false
            })
          }
        }
      })
    },
    resetForm() {
      this.supplierForm = {
        name: '',
        province_id: '',
        city_id: '',
        district_id: '',
        address: '',
        applicant_uid: '',
        referrer_uid: '',
        contact_name: '',
        contact_phone: '',
        status: 1
      }
      this.applicantInfo = {}
      this.referrerInfo = {}
      this.cities = []
      this.districts = []
      if (this.$refs.supplierForm) {
        this.$refs.supplierForm.clearValidate()
      }
    },
    getPickupPointList() {
      if (!this.currentVendor) return

      this.pickupPointLoading = true
      getPickupPoints(this.currentVendor.id, this.pickupPointQuery).then(response => {
        this.pickupPointLoading = false
        if (response.data && response.data.data) {
          this.pickupPointList = response.data.data
          this.pickupPointTotal = response.data.total
        } else {
          this.pickupPointList = []
          this.pickupPointTotal = 0
        }
      }).catch(error => {
        this.pickupPointLoading = false
        console.error('获取自提点列表失败:', error)
        this.$message.error('获取自提点列表失败')
      })
    },
    handlePickupPointSearch() {
      this.pickupPointQuery.pageNum = 1
      this.getPickupPointList()
    },
    handlePickupPointSizeChange(val) {
      this.pickupPointQuery.pageNum = 1
      this.pickupPointQuery.pageSize = val
      this.getPickupPointList()
    },
    handlePickupPointCurrentChange(val) {
      this.pickupPointQuery.pageNum = val
      this.getPickupPointList()
    },
    handlePickupPointDialogClose() {
      this.pickupPointQuery = {
        storeName: '',
        applicant: '',
        pageNum: 1,
        pageSize: 10
      }
      this.pickupPointList = []
      this.pickupPointTotal = 0
      this.currentVendor = null
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.filter-container {
  margin-bottom: 20px;
}

.table-container {
  margin-bottom: 20px;
}

.member-info {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background: #f5f7fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
}

.member-info .avatar {
  margin-right: 12px;
  flex-shrink: 0;
}

.member-info .info {
  flex: 1;
}

.member-info .info .name {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  line-height: 22px;
}

.member-info .info .uid {
  font-size: 12px;
  color: #909399;
  line-height: 18px;
}
</style>
